<div class="pcap" ng-controller='pcap'>

  <style>
    span, td, th {
      font-size: 13px;
    }

    .bg-hide {
      color: #222;
    }

    .pcap h6 {
      font-size: 1em;
    }

    .pcap .hex {
      max-height: 300px;
      overflow-y: auto;
    }

    .pcap-es-results th {
      height: 0;
      line-height: 0;
      padding-top: 0;
      padding-bottom: 0;
      color: transparent;
      border: none;
      white-space: nowrap;
    }

    .pcap-es-results th div{
      position: absolute;
      background: transparent;
      padding: 9px 25px;
      top: 0;
      margin-left: -25px;
      line-height: normal;
      color: #fff;
    }

    .pcap-es-results th:first-child div{
      border: none;
    }

    .pcap-es-results .pcap-container {
      max-height: 200px;
      overflow-y: auto;
    }

    .pcap-es-results {
      position: relative;
      padding-top: 37px;
    }

    .pcap-raw {
      background: #FCFCFC;
      color: #5F5F5F;
    }

    .packet-viewer {
      min-height: 300px;
    }

    .packet-list {
      max-height: 300px;
      overflow-y: scroll;
    }

    .packet .stack {
      max-height: 200px;
      overflow-y: scroll;
      border-radius: 1px;
      border: 1px solid #333;
      border-collapse: separate;
      border-left: 0;
      margin: 20px 0;
      padding-bottom: 10px;
    }

    .highlight {
      background-color: #0067B5;
    }

    .newline:after {
      content:"\A";
      white-space:pre;
    }

    .padright {
      margin-left: 16px !important;
    }

    .pcap-editor {
      background-color: #333;
      padding: 5px;
      margin-bottom: 5px;
    }

    .loading {
      background-image: url('/img/load_big.gif');
      width: 115px;
      height: 15px;
    }
  </style>

  <p ng-if="user && !user.permissions.pcap">Access Denied</p>

  <div class="table-container" ng-if="!user || user.permissions.pcap">
    <div class="pcap-editor">
      <div class="editor-row">
        <div class="editor-option">
          <label class="small">Source IP</label><input type="text"
              class="input-medium" ng-model="$parent.ip_src_addr"></input>
        </div>
        <div class="editor-option">
          <label class="small">Destination IP</label><input type="text"
              class="input-medium" ng-model="$parent.ip_dst_addr"></input>
        </div>
        <div class="editor-option">
          <label class="small">Source Port</label><input type="text"
              class="input-medium" ng-model="$parent.ip_src_port"></input>
        </div>
        <div class="editor-option">
          <label class="small">Destination Port</label><input type="text"
              class="input-medium" ng-model="$parent.ip_dst_port"></input>
        </div>
        <div class="editor-option">
          <label class="small">Protocol</label><input type="text"
              class="input-small" ng-model="$parent.ip_protocol"></input>
        </div>
      </div>

      <div class="editor-row">
        <div class="editor-option">
          <label class="small">Timestamp</label>
          <input class="input-medium" type="text" ng-model="$parent.ts"/>
        </div>
        <div class="editor-option">
          <label class="small">Duration(+/-)</label>
          <select class="input-small"
              ng-options="d.desc for d in durations"
              ng-model="$parent.duration"></select>
        </div>
        <div class="editor-option">
          <label class="small">&nbsp</label><button type="button"
              class="btn btn-success" ng-click="search()">Search</button>

          <label class="small">Reverse Traffic
            <input type="checkbox" class="input-small"
                ng-model="$parent.includeReverseTraffic"></input></label>
        </div>
      </div>
    </div>

    <div ng-if="loadingStreams" class="loading"></div>
    <div ng-if="results">
      <h6>STREAMS</h6>

      <div class="pcap-es-results">
        <div class="pcap-container">
          <table class="table table-bordered table-condensed table-details table-striped"
              ng-style="panel.style">
            <thead>
              <tr>
                <th class="span1">Count <div>Count</div></th>
                <th class="span2">Src IP <div>Src IP</div></th>
                <th class="span2">Dest IP <div>Dst IP</div></th>
                <th class="span1">Src Port <div>Src Port</div></th>
                <th class="span1">Dst Port <div>Dst Port</div></th>
                <th class="span1">Protocol <div>Protocol</div></th>
                <th class="span3">Pcap ID <div>Pcap ID</div></th>
                <th class="span1">Download <div>Download</div></th>
              <tr>
            </thead>

            <tbody bindonce ng-repeat="doc in results.facets.packets.terms">
              <tr ng-click="setStream($index, doc.term)"
                  ng-class="{highlight: $index === selectedStream}"
                  ng-init="doc.unhexed = parsePcapId(doc.term)">
                <td>{{ doc.count }}</td>
                <td>{{ doc.unhexed.src_ip }}</td>
                <td>{{ doc.unhexed.dst_ip }}</td>
                <td>{{ doc.unhexed.src_port }}</td>
                <td>{{ doc.unhexed.dst_port }}</td>
                <td>{{ doc.unhexed.protocol }}</td>
                <td>{{ doc.term }}</td>
                <td>
                  <a ng-click="downloadStream(doc)">
                    <span class="icon-download"></span>
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div ng-if="loadingPackets" class="loading"></div>
    <div ng-if="stream">
      <div class="pull-right">
        <a ng-click="setStream(
          selectedStream,
          results.facets.packets.terms[selectedStream].term,
          streamPage - 1)">&lt;</a>

        <a ng-click="setStream(
          selectedStream,
          results.facets.packets.terms[selectedStream].term,
          streamPage + 1)">&gt;</a>
      </div>

      <h6>PACKETS</h6>

      <div class="pcap-es-results">
        <div class="pcap-container">
          <table class="table table-bordered table-condensed table-details table-striped"
              ng-style="panel.style">
            <thead>
              <tr>
                <th class="span1">No.<div>No.</div></th>
                <th class="span2">Timestamp<div>Timestamp</div></th>
                <th class="span2">Src IP<div>Src IP</div></th>
                <th class="span2">Dest IP<div>Dst IP</div></th>
                <th class="span1">Src Port<div>Src Port</div></th>
                <th class="span1">Dst Port<div>Dst Port</div></th>
                <th class="span1">Protocol<div>Protocol</div></th>
                <th class="span3">Pcap ID<div>Pcap ID</div></th>
              <tr>
            </thead>

            <tbody bindonce ng-repeat="doc in stream.hits.hits">
              <tr ng-click="setPacket($index, doc._source.message)"
                  ng-class="{highlight: $index === selectedPacket}"
                  ng-init="doc.unhexed = parsePcapId(doc._source.message.pcap_id)">
                <td>{{ $index + 1 + (streamFrom || 0)}}</td>
                <td>{{ doc._source.message.ts_micro / 1000 | date:'yyyy-MM-dd hh:mm:ss.sss'}}</td>
                <td>{{ doc.unhexed.src_ip }}</td>
                <td>{{ doc.unhexed.dst_ip }}</td>
                <td>{{ doc.unhexed.src_port }}</td>
                <td>{{ doc.unhexed.dst_port }}</td>
                <td>{{ doc.unhexed.protocol }}</td>
                <td>{{ doc._source.message.pcap_id }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div ng-if="loadingPcap" class="loading"></div>
    <div class="pcap-es-results" ng-if="packetData.length > 1">
      <table class="table table-bordered table-condensed table-details table-striped"
          ng-style="panel.style" ng-show="packetData.length">
        <thead>
          <tr>
            <td class="span1">No.</td>
            <td class="span2">Source</td>
            <td class="span2">Destination</td>
            <td class="span7">Info</td>
          <tr>
        </thead>
        <tbody ng-repeat="p in packetData">
            <tr ng-click="setPcapPacket(p)"
                ng-class="{highlight : $parent.packet == p}">
              <td><span>{{$index + 1}}</span></td>
              <td>{{p.proto[3].field[10].$.show}}</td>
              <td>{{p.proto[3].field[14].$.show}}</td>
              <td>{{p.proto[4].field[0].$.showname | sourcePort}}</td>
            </tr>
        </tbody>
      </table>
    </div>

    <div class="packet-viewer" ng-if="packetData.length">
      <div ng-if="packetData.length == 1">
        <div packet="packetData[0]" class="packet"></div>
      </div>

      <div ng-if="packet">
        <div packet="packet" class="packet"></div>
      </div>
    </div>
  </div>
</div>

<script type="text/ng-template" id="packet.html">
  <div class="stack" proto="packet.proto" selected="selected"></div>
  <div class="hex" hex-bytes dump="packet.hexdump" selected="selected"></div>
</script>

<script type="text/ng-template" id="proto.html">
  <div ng-repeat="f in proto">
    <div ng-click="select(f)"
        ng-class="{highlight: $parent.selected.uid == f.$.uid}">

      <div style="padding-left: {{ $parent.padding }}px">
        <span ng-if="!f.field" class="icon-asterisk bg-hide"></span>
        <span ng-if="f.field" ng-class="{
            'icon-chevron-down': f.$.expanded,
            'icon-chevron-right': !f.$.expanded
          }"></span>

        {{ f.$.showname || f.$.show}}
      </div>
    </div>

    <div class="fields" ng-if="f.field.length && f.$.expanded">
      <div proto="f.field" padding="nextPadding" selected="selected"></div>
    </div>
  </div>
</script>

<script type="text/ng-template" id="hexBytes.html">
  <div class="row">
    <div class="span6">
      <span ng-repeat="b in bytes track by $index">
        <span class="byte" ng-class="{
          highlight: selected.pos <= $index &&
            (selected.pos|num)+(selected.size|num) > $index,
          newline: $index % 16 == 15,
          padright: $index % 16 == 8}"
          ng-click="selectByte($index)"
          style="font-family: monospace;">{{ b }} </span>
      </span>
    </div>

    <div class="span6">
      <span ng-repeat="b in bytes track by $index">
        <span class="byte" ng-class="{
          highlight: (selected.pos|num) <= $index &&
              (selected.pos|num) + (selected.size|num) > $index,
          newline: $index % 16 == 15,
          padright: ($index + 8) % 16 == 0}"
          ng-click="selectByte($index)"
          style="font-family: monospace;">{{ b | toAscii }}</span>
      </span>
    </div>
  </div>
</script>
